<template>

	<view class="PromoterRank">
		<view class="redBg bg-color">
			<view class="header">
				<view class="nav acea-row row-center-wrapper">
					<view class="item" @click="switchTap(index)">
						总排行榜
					</view>
				</view>
				<view class="rank acea-row row-bottom row-center">
					<view class="item" v-if="rankList[1].id">
						<view class="pictrue">
							<image :src="rankList[1].headportrait"></image>
						</view>
						<view class="name line1">{{rankList[1].name}}</view>
						<view class="num">{{rankList[1].invite_number}}人</view>
					</view>
					<view class="item" v-if="rankList[0].id">
						<view class="pictrue">
							<image :src="rankList[0].headportrait"></image>
						</view>
						<view class="name line1">{{rankList[0].name}}</view>
						<view class="num">{{rankList[0].invite_number}}人</view>
					</view>
					<view class="item" v-if="rankList[2].id">
						<view class="pictrue">
							<image :src="rankList[2].headportrait"></image>
						</view>
					 
						<view class="name line1">{{rankList[2].name}}</view>
						<view class="num">{{rankList[2].invite_number}}人</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="rankList.length">
			<view class="item acea-row row-between-wrapper" v-for="(item,index) in rankList" :key='index'>
				<view class="num">{{index+3}}</view>
				<view class="picTxt acea-row row-between-wrapper">
					<view class="pictrue">
						<image :src="item.headportrait"></image>
					</view>
					<view class="text line1">{{item.name}}</view>
				</view>
				<view class="people font-color">{{item.invite_number}}人</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper'>
				<!-- <text class='loading iconfont icon-jiazai' hidden='{{loading==false}}'></text>{{loadTitle}} -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [
					'排行榜'
				],
				rankList: [],
				active: 0,
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			switchTap(index) {
				this.active = index
			},
			init() {
				this.$http('common.getInviteNumber', {
					token: this.$tools.getToken(),

				}).then(res => {
					console.log('res', res)
					this.rankList = res.data.data
				})
			}
		}
	}

</script>

<style>
	.PromoterRank .redBg {
		/* padding: 45rpx 0 30rpx 0; */
	}

	.PromoterRank .header {
		background: url("") no-repeat;
		width: 100%;
		height: 430rpx;
		background-size: 100% 100%;
	}
	.row-center{
		justify-content: center;
	}
	.PromoterRank .header .nav {
		width: 300rpx;
		height: 66rpx;
		border: 1rpx solid #fff;
		border-radius: 33rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0 auto;
	}

	.row-between-wrapper {
		align-items: center;
		justify-content: space-between;
	}

	.PromoterRank .header .nav .item {
		width: 222rpx;
		height: 100%;
		text-align: center;
		line-height: 60rpx;
	}

	.row-center-wrapper {
		align-items: center;
		justify-content: center;
	}

	.acea-row {
		display: flex;
		flex-wrap: wrap;
	}

	.PromoterRank .header .nav .item.font-color:nth-of-type(1) {
		background-color: #fff;
		border-radius: 33rpx 0 0 33rpx;
	}

	.PromoterRank .header .nav .item.font-color:nth-of-type(2) {
		background-color: #fff;
		border-radius: 0 33rpx 33rpx 0;
	}

	.PromoterRank .header .rank {
		padding: 0 20rpx;
		margin-top: 30rpx;
	}

	.PromoterRank .header .rank .item {
		width: 210rpx;
	}

	.font-color {
		color: #fc4141 !important;
	}

	.PromoterRank .header .rank .item .pictrue {
		background: url("") no-repeat;
		background-size: 100% 100%;
		width: 136rpx;
		height: 177rpx;
		position: relative;
		margin: 0 auto;
	}

	.PromoterRank .header .rank .item .pictrue image {
		position: absolute;
		width: 130rpx;
		height: 130rpx;
		display: block;
		bottom: 2rpx;
		border-radius: 50%;
		left: 50%;
		margin-left: -65rpx;
	}

	.PromoterRank .header .rank .item:nth-of-type(2) .pictrue {
		background-image: url("");
		width: 156rpx;
		height: 205rpx;
	}

	.PromoterRank .header .rank .item:nth-of-type(2) .pictrue image {
		width: 150rpx;
		height: 150rpx;
		margin-left: -75rpx;
	}

	.PromoterRank .header .rank .item:nth-of-type(3) .pictrue {
		background-image: url("");
	}

	.PromoterRank .header .rank .item:nth-of-type(3) .pictrue image {
		margin-left: -64rpx;
	}

	.PromoterRank .header .rank .item .name {
		font-size: 30rpx;
		color: #fff;
		margin: 22rpx auto 0 auto;
		text-align: center;
		width: 200rpx;
	}

	.PromoterRank .header .rank .item .num {
		font-size: 30rpx;
		color: #fff;
		text-align: center;
	}

	.PromoterRank .list {
		width: 710rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0rpx auto 0 auto;
		padding: 0 30rpx;
	}

	.PromoterRank .list .item {
		border-bottom: 1px solid #f3f3f3;
		height: 101rpx;
		font-size: 28rpx;
	}

	.PromoterRank .list .item .num {
		color: #666;
		width: 70rpx;
	}

	.PromoterRank .list .item .picTxt {
		width: 350rpx;
	}

	.PromoterRank .list .item .picTxt .pictrue {
		width: 68rpx;
		height: 68rpx;
	}

	.PromoterRank .list .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 50%;
	}

	.PromoterRank .list .item .picTxt .text {
		width: 262rpx;
		color: #333;
	}

	.PromoterRank .list .item .people {
		width: 175rpx;
		text-align: right;
	}

</style>

